<template>
	<view class="body">
		<view class="header"
			style="display: flex;flex-direction: column;justify-content: center;align-items: center;position: relative;">
			<view>
				<scroll-view class="scoll" scroll-x="true" scroll-left="120">
					<view :class="{'text-orange':scrollFlag}" @click="changeScrollClass(0)" class="cu-item ">
						<text>数字藏品</text>
					</view>
					<view :class="{'text-orange':!scrollFlag}" @click="changeScrollClass(1)" class="cu-item">
						<text>发售日历</text>
					</view>
				</scroll-view>
			</view>
			<view style="width: 358px; margin-top: 8px; border-radius: 15px;">
				<view class="u-swiper-wrap" style="border-radius: 18px;">
					<swiper style="height: 104px; background-color: rgb(243, 244, 246);" :autoplay="autoplay"
						:interval="interval">
						<swiper-item>
							<view class="swiper-item uni-bg-red"></view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item uni-bg-green"></view>
						</swiper-item>


					</swiper>
				</view>
			</view>
		</view>
		<!-- 首页体 -->
		<swiper style="height: 75vh;" :current="currentTab">
			<swiper-item>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="contentout">
					<view class="content">
						<view v-for="(index) in 10" :key="index" class="conitem">
							<view class="conitem_imgs">
								<image @click="goDetail()" :mode="aspectFit"
									src="https://linglushucang.oss-cn-beijing.aliyuncs.com/uploads/20220414/1a6fdcae4028e903f5a02de12999042d.png">
								</image>

								<view class="position_left">
									<image :mode="aspectFit" src="http://47.110.68.119/web/static/home/kaishou.png">
									</image>
									<tex>即将开售04-21 16:15</tex>
								</view>
							</view>
							<view class="conitem_name">
								<text>xxxxx-----xxxx</text>
							</view>
							<view class="conitem_title">
								<text>限量</text>
								<text>1000份</text>
							</view>
							<view class="conitem_by">
								<view class="left">
									<image :mode="aspectFit"
										src="https://linglushucang.oss-cn-beijing.aliyuncs.com/uploads/20220413/9959277243a1823ba831708213f0a43e.png">
									</image>
									<text>龙龙--龙龙</text>
								</view>
								<view class="right">
									<text>￥8.0</text>
								</view>
							</view>
						</view>
						<view class="u-load-more-wrap"
							style="background-color: transparent; margin-bottom: 0px; margin-top: 0px; height: auto; padding-bottom: 10px;">
							<view class="u-line"
								style="margin: 0px; border-bottom: 1px solid rgb(212, 212, 212); width: 26px; transform: scaleY(0.5); border-top-color: rgb(212, 212, 212); border-right-color: rgb(212, 212, 212); border-left-color: rgb(212, 212, 212);">
							</view>
							<view class="u-load-more-inner u-more">
								<view class="u-line-1 u-more-text"
									style="color: rgb(96, 98, 102); font-size: 14px; position: relative; z-index: 1; background-color: transparent;">
									到底咯</view>
							</view>
							<view class="u-line"
								style="margin: 0px; border-bottom: 1px solid rgb(212, 212, 212); width: 26px; transform: scaleY(0.5); border-top-color: rgb(212, 212, 212); border-right-color: rgb(212, 212, 212); border-left-color: rgb(212, 212, 212);">
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-green"></view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				scrollFlag: true,
				autoplay: true,
				interval: 2000,
				currentTab: 0,
				scrollTop: 0
			}
		},
		onLoad() {

		},
		methods: {
			changeScrollClass(index) {
				this.scrollFlag = !this.scrollFlag;
				this.currentTab = index
			},
			goDetail() {
				uni.navigateTo({
					url: '/pages/homedetail/homedetail'
				})
			}
		}
	}
</script>

<style>
	.body .header {
		width: 390px;
		height: 189px;
		padding-top: 41px;
		padding-top: 10px;
		background-image: url();
		background-repeat: no-repeat;
		background-size: 100% 100%;
		font-size: 15px;
		color: #999;
	}

	uni-view,
	uni-text {
		box-sizing: border-box;
	}

	.u-swiper-wrap {
		position: relative;
		overflow: hidden;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	.cu-item {
		display: inline-block;
		margin-right: 36px;
	}

	.text-orange {
		font-size: 17px;
		font-family: PingFang SC Bold, PingFang SC Bold-Bold;
		font-weight: 700;
		color: #fff;
	}

	.uni-bg-red {
		background: red;
		height: 100%;
	}

	.uni-bg-green {
		background: green;
		height: 100%;
	}

	.contentout {
		height: 100%;
	}

	.body .content {
		width: 100%;
		padding: 15px;
	}

	.body .content .conitem {
		width: 358px;
		height: 468px;
		border-radius: 10px;
		background-image: url(/static/home/homebgc.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-bottom: 15px;
	}

	.body .content .conitem .conitem_imgs {
		width: 358px;
		height: 358px;
		border-radius: 10px;
		position: relative;
	}

	.body .content .conitem .conitem_name {
		font-size: 17px;
		font-family: PingFang SC Bold, PingFang SC Bold-Bold;
		font-weight: 700;
		text-align: left;
		color: #fff;
		margin: 10px 0 7px 15px;
	}

	.body .content .conitem .conitem_title {
		height: 19px;
		line-height: 19px;
		margin-left: 15px;
	}

	.body .content .conitem .conitem_by {
		width: 100%;
		padding: 0 15px;
		margin-top: 5px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.body .content .conitem .conitem_title uni-text:nth-child(1) {
		width: 34px;
		height: 18px;
		line-height: 18px;
		background: linear-gradient(#ffce26, #e57410);
		border-radius: 3px 0px 0px 3px;
		font-size: 12px;
		font-weight: 400;
		text-align: center;
		color: #222;
	}

	.body .content .conitem .conitem_title uni-text:nth-child(2) {
		width: 59px;
		height: 18px;
		line-height: 18px;
		background: hsla(0, 0%, 100%, .2);
		border-radius: 0 3px 3px 0;
		font-size: 12px;
		font-family: PingFang SC Medium, PingFang SC Medium-Medium;
		font-weight: 500;
		text-align: center;
		color: #fbc223;
	}

	.body .content .conitem .conitem_title uni-text {
		display: inline-block;
	}

	.body .content .conitem .conitem_by .left uni-image {
		width: 19px;
		height: 19px;
		border-radius: 50%;
		vertical-align: middle;
		margin-right: 7px;
	}

	.body .content .conitem .conitem_by .left uni-text {
		font-size: 12px;
		font-family: PingFang SC Medium, PingFang SC Medium-Medium;
		font-weight: 400;
		text-align: left;
		color: #999;
	}

	.body .content .conitem .conitem_by .right {
		font-size: 22px;
		font-family: PingFang SC Bold, PingFang SC Bold-Bold;
		font-weight: 700;
		text-align: center;
		color: #fff;
	}

	.body .content .conitem .conitem_imgs uni-image {
		width: 100%;
		height: 100%;
		border-radius: 10px;
	}

	.body .content .conitem .conitem_imgs .position_left {
		position: absolute;
		left: 10px;
		top: 15px;
		height: 20px;
		padding: 0 7px;
		line-height: 20px;
		border-radius: 10px;
		background: hsla(0, 0%, 100%, .2);
		border-radius: 10px;
		font-size: 12px;
		font-weight: 400;
		text-align: center;
		color: #000000;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.body .content .conitem .conitem_imgs .position_left uni-image {
		width: 15px;
		height: 15px;
		vertical-align: middle;
		margin-right: 5px;
	}

	.u-load-more-wrap {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.u-line {
		vertical-align: middle;
	}

	.u-loadmore-icon-wrap {
		margin-right: 4px;
	}

	.u-line-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.u-load-more-inner {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 0 6px;
	}
</style>
